<script setup lang="ts">
import type { PropType } from "vue";

defineOptions({ name: "grid" });
defineProps({
  rowsPreset: { type: String as PropType<keyof typeof rowPresets> },
  rowTemplate: { type: String },
  colsPreset: { type: String as PropType<keyof typeof colPresets> },
  colTemplate: { type: String },
  gap: { type: [String, Number], default: 0 },
});

const rowPresets = {
  "two-rows-0": "min-content minmax(0, 1fr)",
  "two-rows-1": "minmax(0, 1fr) min-content",
};

const colPresets = {
  "two-cols-0": "min-content minmax(0, 1fr)",
  "two-cols-1": "minmax(0, 1fr) min-content",
};
</script>

<template>
  <div
    :class="['grid', rowsPreset, colsPreset]"
    :style="{
      gridTemplateRows: rowTemplate || (rowsPreset && rowPresets[rowsPreset]),
      gridTemplateColumns: colTemplate || (colsPreset && colPresets[colsPreset]),
      gap: typeof gap === 'number' ? gap + 'px' : gap,
    }"
  >
    <slot />
  </div>
</template>

<style lang="less">
.grid {
  display: grid;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: hidden;

  > * {
    box-sizing: border-box;
  }

  &.two-rows-0 > *:last-child {
    overflow: auto;
  }

  &.two-rows-1 > *:first-child {
    overflow: auto;
  }

  &.two-cols-0 > *:last-child {
    overflow: auto;
  }

  &.two-cols-1 > *:first-child {
    overflow: auto;
  }
}
</style>
